https://supertokens.com/ logo
Join Discord
Powered by
I'm using Nextjs and embedding the forms in differ...
# support-questions-legacy
c
I'm using Nextjs and embedding the forms in different pages. I've noticed that the forms are taking a while to show up. I suppose this is due to the ssr=false in dynamic?
This is how I am embedding the form in my login page
import React from 'react'; import Image from 'next/image'; import { useEffect, useState } from 'react'; import { SignInAndUp } from 'supertokens-auth-react/recipe/emailpassword'; export default function Index() { const [signInAndUp, setSignInAndUp] = useState(null); useEffect(() => { setSignInAndUp(); }, []); return ( <Image src="/computer.jpg" className="object-center object-cover pointer-events-none" alt="Computer image" layout="fill" priority={true} /> Test Test {signInAndUp && signInAndUp} ); }
r
Hey! Can you please format the code in code block so that it’s easier to consume?
c
Yeap! Sorry I am a new discord user
r
Hmm. You are setting a react component as a state? I’m not sure if that’s a good idea
c
This is what happens when I just try to render SignInAndUp without using useEffect
Error: No instance of EmailPassword found. Make sure to call the EmailPassword.init method.See https://supertokens.io/docs/emailpassword/quick-setup/frontend If you are trying to use this method doing server-side-rendering, please make sure you move this method inside a componentDidMount method or useEffect hook.
Copy code
import React from 'react';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import { SignInAndUp } from 'supertokens-auth-react/recipe/emailpassword';
export default function Index() {
  const [componentMounted, setComponentMounted] = useState(false);
  useEffect(() => {
    setComponentMounted(false);
  }, []);
  return (
    <div className="dark:bg-white mx-auto">
      <div className="flex justify-center h-screen">
        <div className="relative hidden bg-cover lg:block lg:w-[60%] xl:w-2/3">
          <Image
            src="/computer.jpg"
            className="object-center object-cover pointer-events-none"
            alt="Computer image"
            layout="fill"
            priority={true}
          />
          <div className="flex items-center h-full px-20 bg-gray-900 bg-opacity-40 relative z-1">
            <div>
              <h2 className="text-4xl font-bold text-white">Test</h2>
            </div>
          </div>
        </div>
        <div className="flex items-center w-full max-w-md px-3 mx-auto lg:w-[40%] xl:w-2/6">
          <div className="text-center mx-auto">
            <h2 className="text-4xl font-bold text-center text-gray-700">
              Test
            </h2>
            <SignInAndUp />
          </div>
        </div>
      </div>
    </div>
  );
}
r
ah right. So you need to wrap your component in the nextjs' dynamic HOC with SSR as false
c
I did wrap it in [[...path]].js
Copy code
import React, { useEffect } from 'react';
import dynamic from 'next/dynamic';
import SuperTokens from 'supertokens-auth-react';
import { redirectToAuth } from 'supertokens-auth-react/recipe/emailpassword';
import { useRouter } from 'next/router';

const SuperTokensComponentNoSSR = dynamic(
  new Promise((res) => res(SuperTokens.getRoutingComponent)),
  { ssr: false }
);

export default function Auth() {
  const router = useRouter();
  // if the user visits a page that is not handled by us
  // (like /auth/asdjklnogjk), then we redirect them back to the /auth/loginsignup page.
  useEffect(() => {
    if (SuperTokens.canHandleRoute() === false) {
      router.push('/auth/loginsignup');
    }
  }, []);

  return (
    <div className="flex h-[75vh]">
      <div className="m-auto">
        <SuperTokensComponentNoSSR />
      </div>
    </div>
  );
}
This is the file /auth/[[...path]].js
And this is /auth/loginsignup.js
r
right, so thats a different route compared to the previous code snippet in which you want to render 
SignInAndUp
?
c
Yeap different page
r
so that too needs to be wrapped in the dynamic HOC
c
I wrapped it like this
Copy code
import React from 'react';
import dynamic from 'next/dynamic';
import Index from '../../components/Auth/Index';

const IndexNoSSR = dynamic(new Promise((res) => res(<Index />)), {
  ssr: false,
});

export default function loginsignup() {
  return (
    <div className="flex h-[75vh]">
      <div className="m-auto">
        <IndexNoSSR />
      </div>
    </div>
  );
}
Getting this error now:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
r
I think this should work:
Copy code
const IndexNoSSR = dynamic(new Promise((res) => res(Index)), {
  ssr: false,
});
c
Now a blank screen is showing
No errors
r
Well, maybe add a console log or something in Index and see if it gets printed iout
c
Awesome got it to work!
Thanks again rp
r
great
6 Views
PreviousNext
Powered by